<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .round1 > div {
            border-radius: 50%;
            position: absolute;
            width: 44px;
            height: 44px;
        }
        .round2 > div {
            border-radius: 50%;
            position: absolute;
            width: 40px;
            height: 40px;
        }
        .round3 > div {
            border-radius: 50%;
            position: absolute;
            width: 35px;
            height: 35px;
        }
        .round4 > div {
            border-radius: 50%;
            position: absolute;
            width:30px;
            height: 30px;
        }
        .box {
            height: 600px;
            width: 430px;
            background: rgb(2,117,2);
            position: relative;
        }
        .one, .two, .three, .four, .five, .six, .seven, .eight, .nine {
            border: 4px;
            height: 160px;
            width: 130px;
            background: #fff;
            position: absolute;
            border-radius: 5px;
        }
        .one {
            left: 10px;
            top: 10px;
        }
        .two {
            left: 150px;
            top: 10px;
        }
        .three {
            left: 290px;
            top: 10px;
        }
        .four {
            left: 10px;
            top: 180px;
        }
        .five {
            left: 150px;
            top: 180px;
        }
        .six {
            left: 290px;
            top: 180px;
        }
        .seven {
            left: 10px;
            top: 350px;
        }
        .eight {
            left: 150px;
            top: 350px;
        }
        .nine {
            left: 290px;
            top: 350px;
        }

        .one > div {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: red;
            margin-top: -35px;
            margin-left: -35px;
            position: absolute;
            top: 50%;
            left: 50%;
        }
        .two > div:nth-child(1) {
            height: 60px;
            width: 60px;
            border-radius: 50%;
            background: rgb(1,0,501);
            left: 50%;
            margin-left: -30px;
            top: 15px;
            position: absolute;
        }
        .two > div:nth-child(2) {
            height: 60px;
            width: 60px;
            border-radius: 50%;
            background: rgb(1,0,501);
            left: 50%;
            margin-left: -30px;
            bottom: 15px;
            position: absolute;
        }
        .three > div:nth-child(1) {
            width: 44px;
            height: 44px;
            background: rgb(1,0,501);
            top: 15px;
            left: 10px;
        }
        .three > div:nth-child(2) {
            width: 44px;
            height: 44px;
            background: red;
            top: 55px;
            left: 50%;
            margin-left: -22px;
        }
        .three > div:nth-child(3) {
            width: 44px;
            height: 44px;
            background: rgb(2,117,2);
            bottom: 20px;
            right: 13px;
        }
        .four > div:nth-child(1) {
            background: rgb(2,117,2);
            top: 20px;
            left: 20px;
        }
        .four > div:nth-child(2) {
            background: rgb(1,0,501);
            top: 20px;
            right: 20px;
        }
        .four > div:nth-child(3) {
            background: rgb(1,0,501);
            bottom: 20px;
            left: 20px;
        }
        .four > div:nth-child(4) {
            background: rgb(2,117,2);
            bottom: 20px;
            right: 20px;
        }
        .five > div:nth-child(1) {
            background: rgb(2,117,2);
            top: 16px;
            left: 16px;
        }
        .five > div:nth-child(2) {
            background: rgb(1,0,501);
            top: 16px;
            right: 16px;
        }
        .five > div:nth-child(3) {
            background: red;
            top: 50%;
            margin-top: -22px;
            left: 50%;
            margin-left: -22px;
        }
        .five > div:nth-child(4) {
            background: rgb(1,0,501);
            bottom: 16px;
            left: 16px;
        }
        .five > div:nth-child(5) {
            background: rgb(2,117,2);
            bottom: 16px;
            right: 16px;
        }
        .six > div:nth-child(1) {
            background: red;
            top: 20px;
            left: 21px;
        }
        .six > div:nth-child(2) {
            background: red;
            top: 20px;
            right: 21px;
        }
        .six > div:nth-child(3) {
            background: rgb(2,117,2);
            top: 69px;
            left: 21px;
        }
        .six > div:nth-child(4) {
            background: rgb(2,117,2);
            top: 69px;
            right: 21px;
        }
        .six > div:nth-child(5) {
            background: rgb(2,117,2);
            top: 109px;
            left: 21px;
        }
        .six > div:nth-child(6) {
            background: rgb(2,117,2);
            top: 109px;
            right: 21px;
        }
        .seven > div:nth-child(1) {
            background: red;
            top: 15px;
            left: 13px;
        }
        .seven > div:nth-child(2) {
            background: red;
            top: 24px;
            left: 47px;
        }
        .seven > div:nth-child(3) {
            background: red;
            top:34px;
            right: 14px;
        }
        .seven > div:nth-child(4) {
            background: rgb(2,117,2);
            top: 80px;
            left: 30px;
        }
        .seven > div:nth-child(5) {
            background: rgb(2,117,2);
            top: 80px;
            right: 30px;
        }
        .seven > div:nth-child(6) {
            background: rgb(2,117,2);
            top: 115px;
            left: 30px;
        }
        .seven > div:nth-child(7) {
            background: rgb(2,117,2);
            top: 115px;
            right: 30px;
        }
        .eight > div:nth-child(1) {
            background: black;
            top: 18px;
            left: 30px;
        }
        .eight > div:nth-child(2) {
            background: black;
            top: 18px;
            right: 30px;
        }
        .eight > div:nth-child(3) {
             background: black;
             top: 49px;
             left: 30px;
        }
        .eight > div:nth-child(4) {
            background: black;
            top: 49px;
            right: 30px;
        }
        .eight > div:nth-child(5) {
            background: black;
            top: 81px;
            left: 30px;
        }
        .eight > div:nth-child(6) {
            background: black;
            top: 81px;
            right: 30px;
        }
        .eight > div:nth-child(7) {
            background: black;
            top: 112px;
            left: 30px;
        }
        .eight > div:nth-child(8) {
            background: black;
            top: 112px;
            right: 30px;
        }
        .nine > div:nth-child(1) {
            background: rgb(1,0,501);
            top: 27px;
            left: 20px;

        }
        .nine > div:nth-child(2) {
            background: rgb(1,0,501);
            top: 27px;
            left: 50%;
            margin-left: -15px;
        }
        .nine > div:nth-child(3) {
            background: rgb(1,0,501);
            top: 27px;
            right: 20px;
        }
        .nine > div:nth-child(4) {
            background: red;
            margin-top: -15px;
            top: 50%;
            left: 20px;
        }
        .nine > div:nth-child(5) {
            background: red;
            margin-top: -15px;
            top: 50%;
            left: 50%;
            margin-left: -15px;

        }
        .nine > div:nth-child(6) {
            background: red;
            margin-top: -15px;
            top: 50%;
            right: 20px;
        }
        .nine > div:nth-child(7) {
            background: rgb(2,117,2);
            bottom: 23px;
            left: 20px;
        }
        .nine > div:nth-child(8) {
            background: rgb(2,117,2);
            left: 50%;
            margin-left: -15px;
            bottom: 23px;
        }
        .nine > div:nth-child(9) {
            background: rgb(2,117,2);
            right: 20px;
            bottom: 23px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one round">
            <div></div>
        </div>
        <div class="two round1">
            <div></div>
            <div></div>
        </div>
        <div class="three round1">
            <div ></div>
            <div ></div>
            <div></div>
        </div>
        <div class="four round1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="five round1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="six round2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="seven round3">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="eight round4">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="nine round4">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>